<template>
  <div id="shuziren">
    <div class="video-list">
      <div class="video-item-add" @click="addVideo()">
        <el-icon :size="16" color="#457AFF"><CirclePlus /></el-icon>
        <span>添加视频</span>
      </div>
      <div class="video-item" v-for="(item, index) in videoList" :key="index">
        <div class="video-item-img">
          <img :src="item.picUrl" />
          <!-- 播放按钮 -->
          <div class="play-btn" @click.stop="playVideo(item)">
            <i
              class="iconfont icon-bofang1"
              style="font-size: 18px; color: #fff"
            ></i>
          </div>
          <!-- 悬停遮罩层 -->
          <div class="video-overlay">
            <span class="video-name">{{ item.name }}</span>
            <span class="video-duration">{{ item.fileTime }}</span>
          </div>
        </div>
        <div class="foot-btns">
          <div class="edit-btn" @click.stop="editVideo(item)">
            <el-icon :size="12" color="#457AFF"><Edit /></el-icon>修改
          </div>
          <div class="del-btn" @click.stop="deleteVideo(item)">
            <el-icon :size="12" color="#457AFF"><Delete /></el-icon>删除
          </div>
        </div>
      </div>
    </div>

    <!-- 视频播放弹窗 -->
    <el-dialog
      v-model="videoDialogVisible"
      :title="currentVideo.name"
      width="800px"
      :before-close="handleCloseVideo"
      class="video-dialog"
    >
      <div class="video-container">
        <video
          ref="videoPlayer"
          :src="currentVideo.videoUrl"
          controls
          autoplay
          preload="auto"
          width="100%"
          height="450"
          @ended="handleVideoEnded"
        >
          您的浏览器不支持视频播放
        </video>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      courseId: "",
      videoDialogVisible: false,
      currentVideo: {
        name: "",
        videoUrl: "",
      },
      videoList: [],
    };
  },
  created() {
    this.courseId = JSON.parse(localStorage.getItem("courseId"));
    this.getVideoList();
  },
  methods: {
    // 获取视频列表
    getVideoList() {
      this.$axios
        .get(
          `/tes/course/auto/make/digital-human-list?courseId=${this.courseId}`
        )
        .then((res) => {
          this.videoList = res.data;
        });
    },
    // 添加视频
    addVideo() {
      this.$router.push({
        path: "/aiTeaching/courseBuild/addShuzirenVideo",
      });
    },

    // 播放视频
    playVideo(item) {
      this.currentVideo = {
        name: item.name,
        videoUrl: item.filePath,
      };
      this.videoDialogVisible = true;
    },

    // 关闭视频弹窗
    handleCloseVideo() {
      this.videoDialogVisible = false;
      // 暂停视频播放
      if (this.$refs.videoPlayer) {
        this.$refs.videoPlayer.pause();
        this.$refs.videoPlayer.currentTime = 0;
      }
    },

    // 视频播放结束
    handleVideoEnded() {
      console.log("视频播放结束");
    },
    editVideo(item) {
      this.$router.push({
        path: "/aiTeaching/courseBuild/addShuzirenVideo",
        query: {
          id: item.id,
        },
      });
    },
    deleteVideo(item) {
      this.$confirm("确定删除该视频吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios
          .delete(`/tes/course/auto/make/resource?id=${item.id}`)
          .then((res) => {
            this.$message.success("删除成功");
            this.getVideoList();
          });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#shuziren {
  position: relative;
  background-color: #f3f5fa;
  padding: 40px 60px;
  box-sizing: border-box;
  min-height: 650px;
  .video-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 50px;
    .video-item {
      position: relative;
      display: flex;
      flex-direction: column;
      width: calc(20% - 20px);
      height: 230px;
      background: #ffffff;
      box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);
      border-radius: 10px;
      border: 1px solid #ffffff;
      box-sizing: border-box;
      transition: transform 0.3s ease, box-shadow 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0px 4px 15px 0px rgba(70, 123, 235, 0.2);
      }

      .video-item-img {
        position: relative;
        width: 100%;
        height: 180px;
        border-radius: 10px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        overflow: hidden;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
        }

        /* 播放按钮 */
        .play-btn {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 30px;
          height: 30px;
          background: rgba(0, 0, 0, 0.6);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;

          &:hover {
            background: rgba(0, 0, 0, 0.8);
            transform: translate(-50%, -50%) scale(1.1);
          }
        }

        /* 遮罩层 */
        .video-overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 30px;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 10px;
          box-sizing: border-box;
          opacity: 0;
          transform: translateY(100%);
          transition: all 0.3s ease;

          .video-name {
            font-size: 12px;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 70%;
          }

          .video-duration {
            font-size: 12px;
            color: #fff;
            white-space: nowrap;
          }
        }

        /* 悬停效果 */
        &:hover {
          .video-overlay {
            opacity: 1;
            transform: translateY(0);
          }

          img {
            transform: scale(1.05);
          }
        }
      }

      .foot-btns {
        position: absolute;
        bottom: 15px;
        right: 15px;
        display: flex;
        align-items: center;
        .del-btn {
          display: flex;
          align-items: center;
          gap: 5px;
          font-size: 14px;
          color: #457aff;
          cursor: pointer;

          &:hover {
            color: #3366dd;
          }
        }
        .edit-btn {
          margin-right: 20px;
          display: flex;
          align-items: center;
          gap: 5px;
          font-size: 14px;
          color: #457aff;
          cursor: pointer;

          &:hover {
            color: #3366dd;
          }
        }
      }
    }
    .video-item-add {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      width: calc(20% - 20px);
      height: 230px;
      background: #ffffff;
      box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);
      border-radius: 10px;
      border: 1px solid #ffffff;
      cursor: pointer;
      box-sizing: border-box;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0px 4px 15px 0px rgba(70, 123, 235, 0.2);
      }

      span {
        font-size: 16px;
        color: #457aff;
      }
    }
  }
}
</style>

<!-- 视频弹窗样式 -->
<style lang="scss">
.video-dialog {
  .el-dialog__body {
    padding: 0;
  }
  // .el-dialog__header {
  //   padding: 0;
  // }

  .video-container {
    border-radius: 8px;
    overflow: hidden;

    video {
      display: block;
      border-radius: 8px;
    }
  }
}
</style>
